<template>
  <view class="normal-login-container">
    <view class="logo-content align-center justify-center flex">
      <image style="width: 100rpx; height: 100rpx;" src="../static/1.jpg" mode="widthFix"></image>
      <text class="title">毛孩乐园注册</text>
    </view>
    <view class="login-form-content">
      <view class="input-item flex align-center">
        <view class="iconfont icon-user icon"></view>
        <input v-model="registerForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
      </view>
      <view class="input-item flex align-center">
        <view class="iconfont icon-password icon"></view>
        <input v-model="registerForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
      </view>
      <view class="input-item flex align-center">
        <view class="iconfont icon-password icon"></view>
        <input v-model="registerForm.confirmPassword" type="password" class="input" placeholder="请输入重复密码" maxlength="20" />
      </view>
  
      <view class="action-btn">
        <button @click="handleRegister()" class="register-btn cu-btn block bg-blue lg round">注册</button>
      </view>
    </view>
    <view class="xieyi text-center">
      <text @click="handleUserLogin" class="text-blue">使用已有账号登录</text>
    </view>
  </view>
</template>

<script>
	import axios from 'axios'; // 引入axios来进行HTTP请求
	import config from '../config';  //引入config来设置全局的东西
export default {
  data() {
    return {
      globalConfig: {
        appInfo: {
          logo: '/static/logo.png' // 你的应用logo地址
        }
      },
      registerForm: {
        username: '',
        password: '',
        confirmPassword: '',
        code: ''
      },
      captchaEnabled: true, // 是否开启验证码，根据需求设置
      codeUrl: '/static/code.png' // 验证码图片地址，根据实际情况设置
    };
  },
  methods: {
  async handleRegister() {
    if (!this.registerForm.username || !this.registerForm.password || !this.registerForm.confirmPassword) {
      uni.showToast({
        title: '用户名、密码或重复密码不能为空',
        icon: 'none'
      });
      return;
    }
  
    if (this.registerForm.password !== this.registerForm.confirmPassword) {
      uni.showToast({
        title: '两次输入的密码不一致',
        icon: 'none'
      });
      return;
    }
    
    try {
      const response = await uni.request({
        url: config.apiUrl + '/user/register',
        method: 'POST',
        data: {
          username: this.registerForm.username,
          password: this.registerForm.password,
          // code: this.loginForm.code // 如果启用验证码，包括验证码
        }
      });
  
      // 检查请求是否成功
      if (response.data) {
        console.log('注册成功:', response.data);
        // 注册成功，跳转到登录页
		 uni.showToast({
		        title: '注册成功',
		        icon: 'success'
		      });
        uni.reLaunch({
          url: '/pages/login'
        });
      }else{
        // 注册失败，显示错误信息
        uni.showToast({
          title: response.data.message || '注册失败，请重试',
          icon: 'none'
        });
      }
    } catch (error) {
      console.error('注册错误:', error);
      // 其他错误，可以显示更通用的错误消息
      uni.showToast({
        title: '注册失败，请重试',
        icon: 'none'
      });
    }
  }
,
    getCode() {
      // 获取验证码逻辑，根据实际情况编写
      console.log('Getting code...');
    },
    handleUserLogin() {
      // 处理跳转到登录界面逻辑，根据实际情况编写
      console.log('Redirecting to login...');
    }
  }
};
</script>


<style lang="scss">
  page {
    background-color: #FFEFBA; /* 添加背景颜色 */
  }

  .normal-login-container {
    width: 100%;

    .logo-content {
      width: 100%;
      font-size: 21px;
      text-align: center;
      padding-top: 15%;

      image {
        border-radius: 4px;
      }

      .title {
        margin-left: 10px;
      }
    }

    .login-form-content {
      text-align: center;
      margin: 20px auto;
      margin-top: 15%;
      width: 80%;

      .input-item {
        margin: 20px auto;
        background-color: #f5f6f7;
        height: 45px;
        border-radius: 20px;

        .icon {
          font-size: 38rpx;
          margin-left: 10px;
          color: #999;
        }

        .input {
          width: 100%;
          font-size: 14px;
          line-height: 20px;
          text-align: left;
          padding-left: 15px;
        }

      }

      .register-btn {
        margin-top: 40px;
        height: 45px;
      }

      .xieyi {
        color: #333;
        margin-top: 20px;
      }
      
      .login-code {
        height: 38px;
        float: right;
      
        .login-code-img {
          height: 38px;
          position: absolute;
          margin-left: 10px;
          width: 200rpx;
        }
      }
    }
  }

</style>

